<template>
  <div class="person-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="dbx">
        <span slot="label">
          <i class="el-icon-s-order"></i>&nbsp;待办箱
        </span>
        <div class="form">
          <el-form :inline="true" label-position="right" label-width="120px" :model="dbx" class="demo-form-inline">
            <el-form-item label="业务编号">
              <el-input v-model="dbx.pName" placeholder="请填写业务编号"></el-input>
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input v-model="dbx.name" placeholder="请填写项目名称"></el-input>
            </el-form-item>
            <el-form-item label="所在区县">
              <el-select width="185" v-model="dbx.a" placeholder="--请选择--">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(dbx)">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary">一键审签（同意）</el-button>
          <el-button type="danger">一键审签（不同意）</el-button>
        </div>
        <div class="table">
          <div class="table-box">
            <xTable :btn="dbxBtn" :loading="loading" checkbox index :head="dbxHead" :tableData="tableData" :search="dbx" @on-changePage="(v)=>getData(v)" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="ybx">
        <span slot="label">
          <i class="el-icon-s-claim"></i>&nbsp;已办箱
        </span>
        <div class="form">
          <el-form :inline="true" label-position="right" label-width="120px" :model="ybx" class="demo-form-inline">
            <el-form-item label="业务编号">
              <el-input v-model="ybx.pName" placeholder="请填写业务编号"></el-input>
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input v-model="ybx.name" placeholder="请填写项目名称"></el-input>
            </el-form-item>
            <el-form-item label="所在区县">
              <el-select width="185" v-model="ybx.a" placeholder="--请选择--">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(ybx)">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <div class="table-box">
            <xTable
              :loading="loading"
              checkbox
              index
              scyjbClick
              :head="ybxHead"
              :tableData="tableData"
              :search="ybx"
              @on-changePage="(v)=>getData(v)"
              :btn="ybxBtn"
              @on-jbxxClick="jbxxClick"
              @on-scyjbClick="scyjbClick"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import { getList } from "@/api/table";
import { setTimeout } from "timers";
export default {
  components: {
    xTable
  },
  data() {
    return {
      dbxBtn: {
        look: { name: "查看", way: "on-lookClick" }
      },
      loading: false,
      activeName: "dbx",
      dbxHead: {
        date: "业务编号",
        name: "所在区县",
        province: "项目类型",
        city: "项目级别",
        zip: {
          name: "项目名称",
          width: 250
        },
        a: "状态",
        b: "上一流程提交时间",
        c: "提交人"
      },
      dbx: {
        user: "",
        a: "",
        b: "",
        c: "",
        idCard: "",
        state: "",
        type: ""
      },
      ybxBtn: {
        jbxx: { name: "基本信息", way: "on-jbxxClick" }
      },
      ybxHead: {
        date: "业务编号",
        name: "所在区县	",
        province: "项目类型	",
        city: "项目级别	",
        zip: {
          name: "项目名称	",
          width: 250
        },
        a: "状态",
        b: "是否通过"
      },
      ybx: {
        user: "",
        a: "",
        b: "",
        c: "",
        idCard: "",
        state: "",
        type: ""
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200334
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
      currentPage: 1
    };
  },
  methods: {
    onSubmit(data) {
      console.log(data);
      if (data == "dbx") {
        this.getData(this.dbx);
      } else if (data == "ybx") {
        this.getData(this.ybx);
      }
    },
    jbxxClick(item) {
      console.log(item);
    },
    scyjbClick(item) {
      console.log(item);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData(data) {
      console.log(data);
      //this.loading = true
      /*getList().then(rs => {
        this.tableData = rs.data;
        this.loading = false;
      })*/
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.person-container {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}
.table,
.table-box {
  margin-top: 20px;
  .block {
    float: right;
    margin: 30px;
  }
}

.line {
  text-align: center;
}

/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
}


</style>
